<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <title>支付</title>
    <include file="public@head"/>
</head>

<body class="body-white" id="top">
<include file="public@nav" />
<div class="container tc-main">
    <div class="row">
        <!--步骤 -->
        <div class="step wrap">
            <ul>
                <li>1、填写订单</li>
                <li>2、选择座位</li>
                <li class="now">3、支付订单</li>
            </ul>
        </div>
        <!--步骤 -->

        <!--&lt;!&ndash;栏目 &ndash;&gt;-->
        <!--<div class="column">-->
            <!--<h2>订单付款</h2>-->
        <!--</div>-->
        <!--&lt;!&ndash;栏目 &ndash;&gt;-->

        <!--填写信息 -->
        <div class="fill-in wrap" id="members">
            <form action="" class="js-ajax-form">
            <div class="fill-in-list">
                <ul>
                    <li>
                        <i>支付剩余时间：</i>
                        <span>
                            <b id="timeleft">
                                <div class="timestyle">
                                    {$hour}时{$minute}分{$second}秒
                                </div>
                            </b>
                        </span>
                    </li>
                    <li>
                        <i>报名信息：</i>
                        <span><b>{$order.student_name}&nbsp;&nbsp; {$order.school_name} - {$order.class_name} 《{$order.course_name}》</b></span>
                    </li>
                    <li>
                        <i>订单编号：</i>
                        <span><b>{$order.order_id}</b></span>
                    </li>
                    <li>
                        <i>订单金额(元)：</i>
                        <span><b class="price">{$order.pay_amount}</b></span>
                    </li>
                    <li>
                        <i>选择支付方式：</i>
                        <span>
                            <dl class="pay">
                                <input type="hidden" name="order_id" id="order_id" value="{$order.order_id|base64_encode}" readonly="readonly"/>
                                <dd >
                                    <input type="radio"  value="alipay" name="pay_type" class="checkbox" id="pay01" checked="checked"/>
                                    <label for="pay01">
                                        <em class="zfb">支付宝</em>
                                    </label>
                                </dd>
                                <dd>
                                    <input type="radio" value="wxpay" name="pay_type" class="checkbox" id="pay02"/>
                                    <label for="pay02">
                                        <em class="wx">微信</em>
                                    </label>
                                </dd>
                            </dl>
                        </span>
                    </li>
                    <li>
                        <span style="color: #ff0000;">如若线下支付，请联系&nbsp;4001580128</span>
                    </li>
                </ul>
            </div>
            </form>
        </div>
        <!--填写信息 -->

        <!--确认提交 -->
        <div class="fill-btn">
            <ul>
                <li>
                    <button href="javascript:;" id="init_pay" class="bm">支付</button>
                </li>
            </ul>
        </div>
        <!--确认提交 -->
    </div>
</div>
<include file="public@footer" />

<include file="public@scripts" />

<script type="text/javascript">
    //支付
    $(document).on('click','#init_pay',function () {
        var orderId = $('#order_id').val();
        var payType = $('input:radio[name="pay_type"]:checked').val();
        if(!orderId || !payType){
            return false;
        }

        $.ajax({
            url:"{:url('order/FrontOrder/ajax_pay')}",
            type:'post',
            dataType:'json',
            data:{"order_id":orderId, "pay_type":payType},
            success:function(jsonData){
                if(jsonData.code == 1){
                    location.href = jsonData.data;
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
            }
        });
    });

    $(function(){
        var timeLeft;//剩余时间
        timeLeft = '{$left_time}';
        var timeCount=window.setInterval(setTime,1000);//每秒执行一次函数setTime;

        function setTime(){
            if (timeLeft <= 0){
                window.clearInterval(timeCount);//停止计时器
                $('#timeleft').html('此订单已过期,请重新提交');
                $('#init_pay').attr('disabled','true').css('cursor','not-allowed').removeClass('bm');

                //取消过期订单
                var orderId = $('#order_id').val();
                if(!orderId){
                    return false;
                }

                $.ajax({
                    url:"{:url('order/FrontOrder/ajax_cancel')}",
                    type:'post',
                    dataType:'json',
                    data:{"order_id":orderId},
                    success:function(jsonData){
                        console.log(jsonData);
                        if(jsonData.code == 1){
                            location.href = jsonData.data;
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                    }
                });
            }else{
                timeLeft--;
                var hour=Math.floor(timeLeft/3600);
                var minute=Math.floor((timeLeft%3600)/60);
                var second=timeLeft-hour*3600-minute*60;
                if(hour<10){hour='0'+hour;}
                if(minute<10){minute='0'+minute;}
                if(second<10){second='0'+second;}
                $('#timeleft').html(
                    '<div class="timestyle">'+
                    hour+'时'+
                    minute+'分'+
                    second+'秒'+
                    '</div>'
                );
            }
        }
    })
</script>
</body>
</html>